<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true">
	<head>
		<title>jGrowl Examples</title>
		<link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/>
		<style type="text/css">
			html,
			body {
				font-family: "Helvetica neue", Helvetica, Arial, sans-serif;
				padding: 0;
				margin: 0;
			}
            
			h1, h2, h3, h4, h5 {
				margin-top:				2px;
				margin-bottom:			2px;
			}

			.jGrowl .manilla {
				background-color: 		#FFF1C2;
				color: 					navy;
			}
			
			.jGrowl .flora {
				background: 			#E6F7D4 url(flora-notification.png) no-repeat;
				-moz-border-radius: 	0px;
				-webkit-border-radius:	0px;
				opacity: 				1;
				filter: 				alpha(opacity = 100);
				width: 					270px;
				height: 				90px;
				padding: 				0px;
				overflow: 				hidden;
				border-color: 			#5ab500;
			}

			.jGrowl .flora .message {
				padding: 				5px;
				color: 					#000;
			}
			
			.jGrowl .flora .header {
				background: 			url(flora-header.png) no-repeat;
				padding: 				5px;
			}

			.jGrowl .flora .close {
				background: 			url(flora-close.png) no-repeat;
				padding: 				5px;
				color: 					transparent;
				padding: 				0px;
				margin: 				5px;
				width:					17px;
			}

			#dummyNav {
				position: fixed;
				background: green;
				width: 100%;
				height: 50px;
			}

		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
		<script type="text/javascript" src="../jquery.jgrowl.js"></script>
		<script type="text/javascript">

		// In case you don't have firebug...
		if(typeof console === "undefined") {
		    console = { log: function() { } };
		}

		(function($){

			$(function(){

				$.jGrowl.defaults.closerTemplate = "<div>[ xxxxx ]</div>";
				$.jGrowl.defaults.appendTo = "div#dummyNav";

				$.jGrowl("This message is sticky and clickable", {
					sticky: true,
					click: function(msg) {
						alert("You clicked me");
					}
				});

				$.jGrowl("This message is sticky and clickable");
				$.jGrowl("This message is sticky and clickable");
				$.jGrowl("This message is sticky and clickable");
				$.jGrowl("This message is sticky and clickable");
				$.jGrowl("This message is sticky and clickable");
				$.jGrowl("This message is sticky and clickable");
			});
		})(jQuery);

		</script>
	</head>
	<body>
		<div id="dummyNav">I'm the dummy navigation</div>
		
		<h1>Append To Another DOM-Object</h1>
	</body>
</html>
